<template>
  <view class="detailContent courseDetail">
    <!-- #ifdef APP-PLUS || MP-->
    <app-plus-bar/>
    <!-- #endif -->
    <uni-nav-bar :fixed="true"
                 title="班级详情"
                 :shadow='false'
                 color="#fff"
                 background-color="#0AAFFF"
                 right-icon="home"
                 left-icon="back"
                 @click-left="_handleLeft"
                 @click-right="_handleRight">
    </uni-nav-bar>
    <view class="orgInfo">
      <view class="rightInfo">
        <view class="coursetitle">{{detailData.title}}</view>
        <view class="courseMoney">
          <view class="listMoney">
            <view class="currmoney">￥{{detailData.currMoney}}</view>
            <view class="oldmoney">￥{{detailData.oldMoney }}</view>
            <view class="discount" v-if='detailData.discount'> / {{detailData.discount}}</view>
          </view>
          <payment :type='detailData.type' :_handleClick="_handleGOApply"/>
        </view>
      </view>
    </view>
    <view class="otherList">
      <view class="otherListtitle">
        <view class="titleIcon">
          <uni-icon type="phone" color="#fff" size="14"/>
        </view>
        <text class='text'>信息介绍</text>
      </view>
      <view class="contentText">
        <view class="infoText">
          <text class='infoTextT'>总课时</text>
          <text class="centerO">:</text>
          <text>3课时</text>
        </view>
        <view class="infoText infoText1">
          <text class='infoTextT'>咨询时间</text>
          <text class="centerO">:</text>
          <text>9:00 - 21:00
          </text
          >
        </view>
        <view class="infoText">
          <text class='infoTextT'>上课时间</text>
          <text class="centerO">:</text>
          <text>咨询校区</text>
        </view>
      </view>
    </view>
    <view class="otherList">
      <view class="otherListtitle otherListComment">
        <view class="commentL">
          <view class="titleIcon">
            <uni-icon type="phone" color="#fff" size="14"/>
          </view>
          <text class='text'>授课教师</text>
        </view>

      </view>
      <view class="schoolList">
        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in detailData.teacherList"
              :key="key">
          <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
            <view class="uni-media-list-logo" v-if='value.img'>
              <image :src="value.img"></image>
            </view>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">
                <view>{{value.title}}</view>
              </view>
              <view class="uni-media-list-text-bottom me-ellipsis">{{value.leave}}</view>
              <view class="uni-media-list-text-bottom1 me-ellipsis1">{{value.detail}}</view>
              <view class="message">
                <uni-icon type="chat" color="#09bb07" size="24"/>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
  import payment from '@/components/payment'
  import comment from '@/components/comment'
  import uniIcon from '@/components/uni-icon/uni-icon.vue'
  import appPlusBar from '@/components/appPlusBar.vue'

  export default {
    components: {uniNavBar, payment, uniIcon, comment, appPlusBar},
    // props: {
    //   detailData: Object,
    // },
    data() {
      return {
        moreShow: false,
        detailData: {
          title: 'xxxxx启蒙课',
          imgUrl: 'http://www.qunaerxue.cn/uploads/advs/201803161324453659.jpg',
          address: '上海市上市上海市上海市上海市上海市篮球馆',
          seeNum: '9999',
          currMoney: '99',
          oldMoney: '199',
          discount: '5.0折',
          studyTime: '2',
          type: 1,
          teacherList: [
            {
              title: "幸福",
              leave: '高级顾问',
              img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
              detail: '高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问'
            }, {
              title: "幸福",
              leave: '高级幼教',
              img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
              detail: '高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问'
            }, {
              title: "幸福",
              leave: '普通教师',
              img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
              detail: '高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问高级顾问'
            }
          ],
          traffic: '地铁10好线。。。。。',
          introduction: '上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆'
        },
      }
    },
    methods: {
      _handleGOApply() {
        uni.navigateTo({
					url: `/pages/apply/index`
				})
      },
      _handleMore() {
        this.moreShow = !this.moreShow
      },
      _handleLeft() {
        uni.navigateBack()
      },
      _handleRight() {
        uni.showToast({
          title: 'right'
        });
      },
    }
  }
</script>

<style scoped lang=scss>
  @import "../../common/detail";

  .courseDetail {
    .orgInfo {
      padding: 0;

      .rightInfo {
        padding: 30upx;

        .coursetitle {
          color: #000;
          font-size: 32upx;
        }

        .courseMoney {
          display: flex;
          align-items: center;
          padding-top: 10upx;
          font-size: 32upx;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .listMoney {
            display: flex;

            .currmoney {
              color: #ffa300;
            }

            .oldmoney {
              padding: 0 10upx;
            }
          }

          .contentText {
            color: #00b7ee;
          }
        }

        .seeNum {
          margin-bottom: 0;
        }
      }

    }

    .otherList {
      .contentText {
        .infoText {
          display: flex;

          .infoTextT {
            text-align: justify;
            text-align-last: justify;
            width: 120upx;
          }

          .centerO {
            padding: 0 10upx;
          }
        }

        .infoText1 {
          margin: 26upx 0;
        }

        .chooseClass {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .className {
            color: #000;
            font-size: 32upx;
          }
        }
      }

      .feature {
        font-size: 44upx;
        color: #0AAFFF;
        padding-left: 30upx;
        margin: 20upx 0 -10upx 0;
      }

      .schoolList {
        .uni-media-list-logo {
          width: 160upx;
          height: 160upx;

          image {

          }
        }

        .uni-media-list-text-top {
          margin: 0;
        }

        .uni-media-list-body {
          position: relative;

          .message {
            position: absolute;
            top: 0;
            right: 0;
          }
        }

        .uni-media-list-text-bottom {
          color: #0AAFFF;
          margin: 14upx 0;
        }

        .uni-media-list-text-bottom1 {
          font-size: 24upx;
          color: #888;
        }

        .me-ellipsis1 {
          text-overflow: ellipsis;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
</style>
